<template>
  <div class="home">
    <!-- 模板使用不需要加上value -->
    <p>{{ obj.username }}</p>
    <p>{{ lists[0].username }}</p>
    <button @click="changeMsg">改变数据</button>
  </div>
</template>

<!-- setup新写法 -->
<script setup>
import { ref } from 'vue'

// 1.ref使数据成为响应式
let obj = ref({
  id: '1001',
  username: '小王'
});

let lists = ref([{
  id: 's001',
  username: '小才'
}])

let changeMsg = () => {
  console.log('修改数据');
  // 注意加上value
  lists.value[0].username = '小奥'
}

</script>
